<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>栏目 - 听到微笑的博客</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/style.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
<link rel="apple-touch-icon-precomposed" href="${pageContext.request.contextPath }/images/icon/icon.png">
<link rel="shortcut icon" href="${pageContext.request.contextPath }/images/icon/favicon.ico">
<script src="${pageContext.request.contextPath }/js/jquery-2.1.4.min.js"></script>
</head>

<body class="user-select">
	<section class="container-fluid">
		<jsp:include page="common/top.jsp"></jsp:include>
		<div class="row">
			<jsp:include page="common/left.jsp"></jsp:include>
			<div class="col-sm-9 col-sm-offset-3 col-md-10 col-lg-10 col-md-offset-2 main" id="main">
				<div class="row">
					<div class="col-md-5">
						<h1 class="page-header">添加</h1>
						<form action="${pageContext.request.contextPath }/category/add.action" method="post" autocomplete="off">
							<div class="form-group">
								<label for="category-name">栏目名称</label> <input type="text" id="category-name" name="name" class="form-control" placeholder="在此处输入栏目名称" required autocomplete="off"> <span
									class="prompt-text">这将是它在站点上显示的名字。</span>
							</div>
							<div class="form-group">
								<label for="category-alias">栏目别名</label> <input type="text" id="category-alias" name="alias" class="form-control" placeholder="在此处输入栏目别名" required autocomplete="off"> <span
									class="prompt-text">“别名”是在URL中使用的别称，它可以令URL更美观。通常使用小写，只能包含字母，数字和连字符（-）。</span>
							</div>
							<div class="form-group">
								<label for="category-level">栏目优先级</label> <input type="number" id="category-level" name="level" class="form-control" placeholder="在此处输入栏目优先级" required autocomplete="off"> <span
									class="prompt-text">优先级决定显示顺序，优先级从0开始，数值越大优先级越小。</span>
							</div>
							<div class="form-group">
								<label for="category-describe">描述</label>
								<textarea class="form-control" id="category-describe" name="description" rows="4" autocomplete="off"></textarea>
								<span class="prompt-text">描述会出现在网页的description属性中。</span>
							</div>
							<button class="btn btn-primary" type="submit" name="submit">添加新栏目</button>
						</form>
					</div>
					<div class="col-md-7">
						<h1 class="page-header">
							管理 <span class="badge"></span>
						</h1>
						<div class="table-responsive">
							<table class="table table-striped table-hover">
								<thead>
									<tr>
										<th><span class="glyphicon glyphicon-paperclip"></span> <span class="visible-lg">ID</span></th>
										<th><span class="glyphicon glyphicon-file"></span> <span class="visible-lg">名称</span></th>
										<th><span class="glyphicon glyphicon-list-alt"></span> <span class="visible-lg">别名</span></th>
										<th><span class="glyphicon glyphicon-pushpin"></span> <span class="visible-lg">文章总数</span></th>
										<th><span class="glyphicon glyphicon-sort"></span> <span class="visible-lg">优先级</span></th>
										<th><span class="glyphicon glyphicon-pencil"></span> <span class="visible-lg">操作</span></th>
									</tr>
								</thead>
								<tbody>
									<c:forEach items="${categoryList }" var="category" varStatus="status">
										<tr>
											<td>${status.count }</td>
											<td>${category.name }</td>
											<td>${category.alias }</td>
											<td>${category.articleNum }</td>
											<td>${category.level }</td>
											<td><a href="${pageContext.request.contextPath }/category/update/${category.id }.html">修改</a> <a rel="1" onclick="deleteCategory(${category.id },${category.articleNum })">删除</a></td>
										</tr>
									</c:forEach>
								</tbody>
							</table>
							<span class="prompt-text"><strong>注：</strong>栏目有关联文章的请先解除文章关联！</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</section>

	<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
	<script src="${pageContext.request.contextPath }/js/admin-scripts.js"></script>
	<script>
		function deleteCategory(id, articleNum) {
			if (articleNum > 0) {
				alert("解除关联的文章后才能删除！");
			} else {
				if (window.confirm("此操作不可逆，是否确认？")) {
					$.ajax({
						type : "POST",
						url : "${pageContext.request.contextPath }/category/delete/"+id+".action",
						cache : false, //不缓存此页面   
						success : function(data) {
							window.location.reload();
						}
					});
				}
			}
		}
		//是否确认删除
		$(function() {
			$("#category").addClass('active');
		});
	</script>
</body>
</html>
